<template>
  <div class="login_container">
    <div class="login_box">
      <!-- 头像区域 -->
      <!-- 登录表单区域 -->
      <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form">
        <!--        用户名-->
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" prefix-icon="el-icon-user" placeholder="请输入用户名"
            style="font-size: 25px"></el-input>
        </el-form-item>
        <!--        密码-->
        <el-form-item prop="password">
          <el-input v-model="loginForm.password" prefix-icon="el-icon-key" :type="inputtype" placeholder="请输入密码"
            style="font-size: 25px">
          </el-input>
          <div class="showpassword" @click="showpassword" @mouseleave="mouseLeave">
            <el-input prefix-icon="el-icon-view"></el-input>
          </div>
        </el-form-item>
        <!-- 验证码区域 -->
        <!--输入验证码区域-->
        <el-form-item prop="inputCode">
          <el-input v-model="loginForm.inputCode" placeholder="请输入验证码" prefix-icon="el-icon-ice-cream-round"
            style="font-size: 25px" @keyup.enter.native="Login"></el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-tag style="width: 180px;margin-bottom:20px;">{{ loginForm.code }}</el-tag>
          <el-button type="primary" style="width: 180px;float:left;top:10px;" @click="resetCode"
            class="changecode">更换验证码</el-button>
        </el-form-item>

        <!--        按钮区域-->
        <el-form-item class="btns">
          <el-button type="primary" @click="Login" style="width: 180px;float:left;margin-left: 0;">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getKeyPair } from "@/utils/security";
import Vue from "vue";
import Router from "vue-router";
import { setlsItem, getlsItem, clearls } from "@/utils/lstorage";
import { createCode, validate } from "@/utils/code.js";

const VueRouterPush = Router.prototype.push;
Router.prototype.push = function push (to) {
  return VueRouterPush.call(this, to).catch((err) => err);
};

Vue.use(Router);
export default {
  name: "login",
  data () {
    return {
      // 数据绑定对象
      loginForm: {
        username: "",
        password: "",
        code: "",
        inputCode: "",
      },
      // 验证规则对象
      loginFormRules: {
        //验证用户
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入登录密码", trigger: "blur" },
          {
            min: 1,
            max: 15,
            message: "长度在 3 到 15 个字符",
            trigger: "blur",
          },
        ],
        inputCode: [
          { required: true, message: "请输入验证码", trigger: "blur" },
          {
            min: 4,
            max: 4,
            message: "长度为4位",
            trigger: "blur",
          },
        ],
      },
      encrypedPwd: "",
      inputtype: "password",
    };
  },
  mounted: function () {
    this.resetCode();
  },
  methods: {
    Login () {
      if (validate(this.loginForm.inputCode)) {
        // 预验证
        this.$refs.loginFormRef.validate(async (valid) => {
          //未验证通过则直接return
          if (!valid) return;
          if (this.loginForm.username == 'admin' && this.loginForm.password == '123456') {
            this.$router.push("/index");
            this.$message.success("登录成功");
          } else {
            this.$message.error("用户名或密码错误");
          }
          this.resetCode();
          
        });
      }
    },
    //重置登录表单
    resetLoginForm () {
      // console.log(this)
      // ui框架自带的form表单方法
      this.$refs.loginFormRef.resetFields();
      this.resetCode();
      this.$message.info("重置成功");
    },
    resetCode: function () {
      this.loginForm.code = createCode();
    },

    showpassword () {
      this.inputtype = "text";
    },
    mouseLeave () {
      this.inputtype = "password";
    },
  },
};
</script>
<!--加上scoped是将样式应用于此组件，不加是全局-->
<style scoped>
.login_container {
  height: 100%;
}

.login_box {
  z-index: 1;
  width: 100vw;
  height: 400px;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 25px;
}

.avatar_box {
  height: 130px;
  width: 130px;
  border: 1px solid #eee;
  border-radius: 50%;
  padding: 10px;
  /*边框阴影*/
  box-shadow: 0 0 10px rgb(192, 23, 23);
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
}

img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #eee;
}

.login_form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}


.code {
  width: 50px;
  font-size: 23px;
}

.el-tag {
  background-color: #ecf5ff;
  border-color: #d9ecff;
  display: inline-block;
  height: 39px;
  padding: 0 10px;
  line-height: 26px;
  font-size: 33px;
  color: #409eff;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  box-sizing: border-box;
  white-space: nowrap;
  width: 161px;
  word-spacing: -56px;
  font-family: 宋体;
  letter-spacing: 24px;
  background-size: cover;
}

.changecode {
  height: 42px;
  font-size: 15px;
  float: right;
  width: 225px;
}

.autoimg {
  background-size: cover;
}

.showpassword {
  top: 0px;
  left: 413px;
  width: 48px;
  height: 100px;
  position: absolute;

}
</style>
